<template>
  <view>
    <view class="my-userinfo-container">
      <!-- 头像昵称区域 -->
      <view class="top-box">
        <image :src="userInfo.avatarUrl" class="avatar"></image>
        <view class="nickname">欢迎：{{ userInfo.userName }}</view>
      </view>

      <!-- 第三个面板 -->
      <view class="panel">
        <view class="panel-list-item" v-if="!flagRunner">
          <text @click="toRunner(flagRunner)">申请成为配送员</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text @click="toPay(userInfo.userId)">充值<text v-if="flagRunner">&提现</text></text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text @click="toFeedBack(userInfo.userId)">意见反馈</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text @click="toSetting(0,userInfo.userId)">修改昵称</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text @click="toSetting(3,userInfo.userId)">信息补充</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text @click="toResetPassword">修改密码</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item">
          <text  @click="toSetting(2,userInfo.userId)">联系客服</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
        <view class="panel-list-item" @click="logout">
          <text>退出登录</text>
          <uni-icons type="arrowright" size="15"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState 辅助函数
  import {
    mapState,
    mapMutations
  } from 'vuex'

  export default {
    computed: {
      // 将 m_user 模块中的 userinfo 映射到当前页面中使用
      ...mapState('m_user', ['userInfo', 'money']),
    },
    data() {
      return {
        flagRunner: false,
        userinfo: {},
        moneyNew: '',
      }
    },
    created() {
      // 11是配送员
      if (this.userInfo.type == 11 || this.userInfo.type >= 90) {
        this.flagRunner = true;
      }
    },
    methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
      // 充值
      toPay(id) {
        uni.navigateTo({
          url: '/components/my-pay/my-pay',
        })
      },
      // 配送页面
      toRunner(flag) {
        console.log(flag);
        uni.navigateTo({
          url: '/components/my-applyRunner/my-applyRunner?uid='+this.userInfo.userId,
        })
        
      },
      toResetPassword(){
        uni.navigateTo({
          url: '/components/my-resetPwd/my-resetPwd',
        })
      },
      // 设置页面 [0,2] <==> [修改昵称，联系客服]
      toSetting(type, uid) {
        uni.navigateTo({
          url: '/components/settingAndCall/settingAndCall?type=' + type + '&uid=' + uid,
        })
      },
      // 进入反馈页面
      toFeedBack(id) {
        uni.navigateTo({
          url: '/components/feedback/feedback?uid=' + id
        })
      },
      // 退出登录
      async logout() {
        // 询问用户是否退出登录
        const [err, succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗？'
        }).catch(err => err)

        if (succ && succ.confirm) {
          // 用户确认了退出登录的操作
          // 需要清空 vuex 中的 userinfo、token 
          this.updateUserInfo({})
          this.updateToken('')
        }
      }
    }
  }
</script>

<style lang="scss">
  .panel-list-item {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding: 0 10px;
  }

  .panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;

    .panel {
      background-color: white;
      border-radius: 3px;
      margin-bottom: 8px;

      .panel-title {
        line-height: 45px;
        padding-left: 10px;
        font-size: 15px;
        border-bottom: 1px solid #f4f4f4;
      }

      .panel-body {
        display: flex;
        justify-content: space-around;

        .panel-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          font-size: 13px;
          padding: 10px 0;

          .icon {
            width: 35px;
            height: 35px;
          }
        }
      }
    }
  }

  .panel-list {
    padding: 0 10px;
    position: relative;
    top: -10px;

    .panel {
      background-color: white;
      border-radius: 3px;
      margin-bottom: 8px;

      .panel-body {
        display: flex;
        justify-content: space-around;

        .panel-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          font-size: 13px;
          padding: 10px 0;
        }
      }
    }
  }

  .my-userinfo-container {
    height: 100%;
    // 为整个组件的结构添加浅灰色的背景
    background-color: #f4f4f4;

    .top-box {
      height: 400rpx;
      background-color: #00AA00;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .avatar {
        display: block;
        width: 90px;
        height: 90px;
        border-radius: 45px;
        border: 2px solid white;
        box-shadow: 0 1px 5px black;
      }

      .nickname {
        color: white;
        font-weight: bold;
        font-size: 16px;
        margin-top: 10px;
      }

      .money {
        color: black;
        font-weight: bold;
        font-size: 16px;
        margin-top: 10px;
      }
    }
  }
</style>
